<template>
  <div class="data-masking p-4">
    <!-- 添加按钮 -->
    <div class="mb-4">
      <el-button type="primary" @click="handleAdd">
        <div class="i-carbon-add mr-1"></div>添加
      </el-button>
    </div>

    <!-- 脱敏规则列表 -->
    <div class="masking-list bg-white rounded-lg shadow-md">
      <ArtTable :data="maskingList" :loading="loading" border stripe>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="maskingCode" label="脱敏符号" />
        <el-table-column prop="maskingLength" label="位数" align="center" />
        <el-table-column prop="description" label="说明" />
        <el-table-column prop="createTime" label="时间" align="center" sortable />
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)">
              <div class="i-carbon-edit mr-1"></div>编辑
            </el-button>
            <el-button type="danger" link @click="handleDelete(scope.row)">
              <div class="i-carbon-trash-can mr-1"></div>删除
            </el-button>
          </template>
        </el-table-column>
      </ArtTable>

      <!-- 分页 -->
      <div class="mt-4 flex justify-end p-4">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新增/编辑脱敏规则弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '修改脱敏规则' : '新增脱敏规则'"
      width="600px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="脱敏符号" prop="maskingCode">
          <el-input v-model="form.maskingCode" placeholder="请输入脱敏符号" />
        </el-form-item>
        <el-form-item label="位数" prop="maskingLength">
          <el-input-number v-model="form.maskingLength" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="说明" prop="description">
          <el-input v-model="form.description" placeholder="请输入说明" />
        </el-form-item>

        <!-- 脱敏字段配置 -->
        <div v-if="isEdit" class="mt-4">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium">字段配置</h3>
            <el-button type="primary" @click="handleAddField">
              <div class="i-carbon-add mr-1"></div>添加
            </el-button>
          </div>
          
          <el-table :data="form.fields" border>
            <el-table-column prop="fieldCode" label="字段名" />
            <el-table-column prop="fieldName" label="字段中文名" />
            <el-table-column prop="tableName" label="所属表" />
            <el-table-column label="操作" width="100" align="center">
              <template #default="scope">
                <el-button type="danger" link @click="handleDeleteField(scope.$index)">
                  <div class="i-carbon-trash-can mr-1"></div>删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 添加字段弹窗 -->
    <el-dialog
      v-model="fieldDialogVisible"
      title="添加字段"
      width="500px"
    >
      <el-form
        ref="fieldFormRef"
        :model="fieldForm"
        :rules="fieldRules"
        label-width="100px"
      >
        <el-form-item label="所属表" prop="tableName">
          <el-select
            v-model="fieldForm.tableName"
            placeholder="请选择"
            @change="handleTableChange"
          >
            <el-option
              v-for="table in tables"
              :key="table.value"
              :label="table.label"
              :value="table.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字段名" prop="fieldCode">
          <el-select
            v-model="fieldForm.fieldCode"
            placeholder="请选择"
            @change="handleFieldChange"
          >
            <el-option
              v-for="field in fields"
              :key="field.value"
              :label="field.label"
              :value="field.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字段中文名" prop="fieldName">
          <el-input v-model="fieldForm.fieldName" placeholder="请输入字段中文名" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="fieldDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleFieldSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

// 列表数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(4)

const maskingList = ref([
  {
    id: 1,
    maskingCode: '000000',
    maskingLength: 6,
    description: '测试',
    createTime: '2023-05-24 08:52:50'
  },
  {
    id: 2,
    maskingCode: '&&&&&',
    maskingLength: 5,
    description: 'test',
    createTime: '2023-05-08 14:20:16'
  },
  {
    id: 3,
    maskingCode: '*',
    maskingLength: 5,
    description: '替换为*',
    createTime: '2019-11-22 15:25:42'
  },
  {
    id: 4,
    maskingCode: '*',
    maskingLength: 3,
    description: 'qw',
    createTime: '2019-11-13 16:09:18'
  }
])

// 表单数据
const dialogVisible = ref(false)
const isEdit = ref(false)
const formRef = ref<FormInstance>()
const form = reactive({
  maskingCode: '',
  maskingLength: 1,
  description: '',
  fields: []
})

const rules = {
  maskingCode: [{ required: true, message: '请输入脱敏符号', trigger: 'blur' }],
  maskingLength: [{ required: true, message: '请输入位数', trigger: 'blur' }],
  description: [{ required: true, message: '请输入说明', trigger: 'blur' }]
}

// 字段配置数据
const fieldDialogVisible = ref(false)
const fieldFormRef = ref<FormInstance>()
const fieldForm = reactive({
  tableName: '',
  fieldCode: '',
  fieldName: ''
})

const fieldRules = {
  tableName: [{ required: true, message: '请选择所属表', trigger: 'change' }],
  fieldCode: [{ required: true, message: '请选择字段名', trigger: 'change' }],
  fieldName: [{ required: true, message: '请输入字段中文名', trigger: 'blur' }]
}

// 模拟数据
const tables = [
  { label: '智能数据', value: 'smart_data' }
]

const fields = ref([
  { label: '字段1', value: 'field1' },
  { label: '字段2', value: 'field2' }
])

// 方法
const handleAdd = () => {
  isEdit.value = false
  form.maskingCode = ''
  form.maskingLength = 1
  form.description = ''
  form.fields = []
  dialogVisible.value = true
}

const handleEdit = (row: any) => {
  isEdit.value = true
  Object.assign(form, row)
  dialogVisible.value = true
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    type: 'warning'
  }).then(() => {
    // TODO: 删除操作
    ElMessage.success('删除成功')
  })
}

const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      // TODO: 提交表单
      ElMessage.success(isEdit.value ? '修改成功' : '添加成功')
      dialogVisible.value = false
    }
  })
}

const handleAddField = () => {
  fieldForm.tableName = ''
  fieldForm.fieldCode = ''
  fieldForm.fieldName = ''
  fieldDialogVisible.value = true
}

const handleDeleteField = (index: number) => {
  form.fields.splice(index, 1)
}

const handleTableChange = (value: string) => {
  // TODO: 根据选择的表加载字段列表
  fieldForm.fieldCode = ''
}

const handleFieldChange = (value: string) => {
  // TODO: 根据选择的字段设置中文名
  const field = fields.value.find(f => f.value === value)
  if (field) {
    fieldForm.fieldName = field.label
  }
}

const handleFieldSubmit = async () => {
  if (!fieldFormRef.value) return
  await fieldFormRef.value.validate((valid) => {
    if (valid) {
      form.fields.push({
        tableName: fieldForm.tableName,
        fieldCode: fieldForm.fieldCode,
        fieldName: fieldForm.fieldName
      })
      fieldDialogVisible.value = false
    }
  })
}

// 分页方法
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // TODO: 重新加载数据
}
</script> 